import React, {Component} from 'react';
import classNames from 'classnames';
import './modal.scss';
import api from '@/utils/fetch';

/**
 * 配置项:
 * title, message, cancelText, confirmText, showCancel = true, center, modalType
 * modalType === 'code' 验证码模式
 * confirm([id, code])
 */
class Modal extends Component {
  constructor (props) {
    super(props);
    this.state = {
      show: false,
      id: '',
      imgBase64: ''
    };
  }
  async componentDidMount () {
    if (this.props.modalType === 'code') {
      this.refreshImg();
    }
  }
  refreshImg = async () => {
    let {id, imgBase64} = await this.getImg();
    this.setState({id, imgBase64});
  }
  getImg = async () => {
    try {
      let form = new FormData();
      form.append('width', 300);
      form.append('height', 150);
      let {id, imgBase64} = await api('/v2/auth2/CreateCaptcha', {
        method: 'POST',
        body: form
      });
      // console.log(id, imgBase64);
      return {id, imgBase64};
    } catch (e) {
      console.log(e);
    }
  }
  handleCancel = () => {
    // console.log('cancel');
    this.props.onClose();
  }
  handleConfirm = () => {
    // console.log('confirm');
    if (this.props.modalType === 'code') {
      this.props.confirm && this.props.confirm(this.state.id, this.refs.input.value);
    } else {
      this.props.confirm && this.props.confirm();
    }
    this.props.onClose();
  }
  maskClick = (e) => {
    // console.log('maskClick');
  }
  handleKeyPress = (e) => {
    if (e.charCode === 13) {
      console.log(e.charCode);
      this.props.confirm(this.state.id, this.refs.input.value);
      this.props.onClose();
    }
  }
  stopBubble = (e) => {
    e.stopPropagation(); // 阻止冒泡
  }
  render () {
    const {title, cancelText, confirmText, message, showCancel = true, center, modalType} = this.props;
    return (
      <div className="pa-modal">
        <div className="modal-mask" onClick={this.maskClick}>
          <div className="modal-wrapper" onClick={this.stopBubble}>
            <div className="modal-title">{title || '标题'}</div>
            {
              modalType === 'code' ? (
                <div className="modal-content modal-code">
                  <img onClick={this.refreshImg} src={this.state.imgBase64} alt="验证码"/>
                  <input ref="input" onKeyPress={this.handleKeyPress} className="input-number" type="number" placeholder="请输入验证码"/>
                </div>
              ) : (
                <div className={classNames({'modal-content': true, 'modal-content-center': center})}>
                  {message || '内容空'}
                </div>
              )
            }
            <div className="modal-footer">
              {
                showCancel && (
                  <div className="modal-cancel" onClick={this.handleCancel}>{cancelText || '取消'}</div>
                )
              }  
              <div className="modal-confirm" onClick={this.handleConfirm}>{confirmText || '确定'}</div>
            </div>
          </div>
        </div>
      </div>
    );
  }
}

export default Modal;